<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>vue.draggable中文文档 - itxst.com</title>
    <meta name="keywords" content="vue.draggable 中文文档" />
    <meta name="description" content="Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/vue-draggable/tutorial.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/vue-draggable/tutorial.html">vue.draggable中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="vue-draggable">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>vue.draggable中文文档</h1>
               
               <p class="p"><b>Vue.Draggable</b>是一款基于<b>Sortable.js</b>实现的<b>vue拖拽插件</b>。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、<b>vue 2</b>过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。</p><h2>文档修订</h2><p class="p">2022-05-15 修订group属性文档，空数组无法拖入的问题</p><h2>官方网站</h2><p><a href="https://github.com/SortableJS/Vue.Draggable">https://github.com/SortableJS/Vue.Draggable</a></p><h2>其他版本文档</h2><p>非vue版中文文档请访问: &nbsp;<a href="https://www.itxst.com/sortablejs/neuinffi.html">sortable.js</a> <br/>vue3版中文文档请访问: &nbsp;<a href="https://www.itxst.com/vue-draggable-next/tutorial.html">vue.draggable.next</a></p><h2>文件下载</h2><p><a href="//img1.itxst.com/2/0/20a9a5dc553e7dda5b0de744d0994216.zip" target="_blank">下载vuedraggable文件</a></p><p><a href="//img1.itxst.com/8/7/873cd6fa089b10b0bb4f0f80ee6538ae.zip" target="_blank">下载sortable文件</a></p><p><a href="//img1.itxst.com/8/2/822a19c0df9292537ff61dbef465c19f.zip" target="_blank">下载vue文件</a></p><h2>NPM或yarn安装方式</h2><p class="p">yarn add vuedraggable<br/>npm i -S vuedraggable</p><h2>UMD浏览器直接引用JS方式</h2><p class="p">&lt;script src=&quot;https://www.itxst.com/package/vue/vue.min.js&quot;&gt;&lt;/script&gt;<br/>&lt;script src=&quot;https://www.itxst.com/package/sortable/Sortable.min.js&quot;&gt;&lt;/script&gt;<br/>&lt;script src=&quot;https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js&quot;&gt;&lt;/script&gt;</p><h2>属性说明</h2><p>如果下面的属性说明未能完全看明白，请访问非vue版&nbsp;<a href="https://www.itxst.com/sortablejs/neuinffi.html">sortable.js</a>里面有更详细的例子。</p><div class="xst-table"><table interlaced="enabled"><tbody><tr class="ue-table-interlace-color-single firstRow"><th style="border-color: rgb(221, 221, 221); word-break: break-all;width:150px">属性名称</th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">说明</th></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;width:150px">group</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">&nbsp;:group= &quot;name&quot;，相同的组之间可以相互拖拽<br/>或者<span style="color: rgb(0, 176, 80);"> { name: &quot;...&quot;, pull: [true, false, &#39;clone&#39;, array , function], put: [true, false, array <span style="color: rgb(0, 176, 80); background-color: rgb(247, 250, 255);">, function</span>] }</span></td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">sort</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">:sort= &quot;true&quot;,是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">delay</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">:delay= &quot;0&quot;, 鼠标按下后多久可以拖拽</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">touchStartThreshold</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">鼠标移动多少px才能拖动元素</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">disabled</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">:disabled= &quot;true&quot;,是否启用拖拽组件</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">animation</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">handle</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">&nbsp;:handle=&quot;.mover&quot; 只有当鼠标移动到css为mover类的元素上才能拖动</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">filter</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">:filter=&quot;.unmover&quot; 设置了unmover样式的元素不允许拖动</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">draggable</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">:draggable=&quot;.item&quot; 那些元素是可以被拖动的</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">ghostClass</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">:ghostClass=&quot;ghostClass&quot;&nbsp;设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">chosenClass</td><td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">:ghostClass=&quot;hostClass&quot; 被选中目标的样式，<span style="background-color: rgb(252, 252, 252);">你的自定义样式可能需要加</span><span style="background-color: rgb(252, 252, 252);">!important才能生效，并把</span><span style="background-color: rgb(252, 252, 252);">forceFallback属性设置成true</span></td></tr><tr class="ue-table-interlace-color-single"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">dragClass</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">:dragClass=&quot;dragClass&quot;拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">dataIdAttr</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">dataIdAttr: &#39;data-id&#39;</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">forceFallback</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">fallbackClass</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">默认false，克隆的DOM元素的类名</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">allbackOnBody</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">默认false，克隆的元素添加到文档的body中</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">fallbackTolerance</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">拖拽之前应该移动的px</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">scroll</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">默认true,有滚动区域是否允许拖拽</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">scrollFn</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">滚动回调函数</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">scrollSensitivity</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">距离滚动区域多远时，滚动滚动条</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">scrollSpeed</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-color: rgb(221, 221, 221);">滚动速度</td></tr></tbody></table></div><h2>完整例子</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">&lt;template&gt;
  &lt;div&gt;
  &lt;div&gt;{{drag?'拖拽中':'拖拽停止'}}&lt;/div&gt;
  &lt;!--使用draggable组件--&gt;
 &lt;draggable v-model="myArray"  chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd"&gt;
    &lt;transition-group&gt;
     &lt;div class="item" v-for="element in myArray" :key="element.id"&gt;{{element.name}}&lt;/div&gt;
    &lt;/transition-group&gt;
&lt;/draggable&gt; 
  &lt;/div&gt;
&lt;/template&gt;
&lt;style scoped&gt;
        /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        } 
        /*选中样式*/
        .chosen {
            border: solid 2px #3089dc !important;
        }
&lt;/style&gt;
&lt;script&gt;
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
   components: {
            draggable,
        },
   data() {
    return { 
      drag:false,
      //定义要被拖拽对象的数组
      myArray:[
        {people:'cn',id:1,name:'www.itxst.com'},
        {people:'cn',id:2,name:'www.baidu.com'},
        {people:'cn',id:3,name:'www.taobao.com'},
        {people:'us',id:4,name:'www.google.com'}
        ] 
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
&lt;/script&gt;</code></pre><p><a class="btntry" href="//debug.itxst.com/js/ivv3eivm" target="_blank" title="在线试一试">在线试一试</a></p><h2>浏览器umd开发模式</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;vue.draggable例子&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"&gt;
    &lt;script src="https://www.itxst.com/package/vue/vue.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.itxst.com/package/sortable/Sortable.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"&gt;&lt;/script&gt;
    &lt;style scoped&gt;
       /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        } 
        .item:hover {
                background-color: #f1f1f1;
                cursor: move;
            }
            /*选中样式*/
        .chosen {
            border: solid 2px #3089dc !important;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body style="padding:10px;"&gt;
    &lt;div id="app"&gt;
        &lt;div&gt;{{drag?'拖拽中':'拖拽停止'}}&lt;/div&gt;
        &lt;draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @start="onStart" @end="onEnd"&gt;
            &lt;transition-group&gt;
                &lt;div class="item" v-for="element in myArray" :key="element.id"&gt;{{element.name}}&lt;/div&gt;
            &lt;/transition-group&gt;
        &lt;/draggable&gt;
    &lt;/div&gt;
    &lt;script&gt;
        // 全局注册组件
        Vue.component('vuedraggable', window.vuedraggable)
        var app = new Vue({
            el: '#app',
            components: {
                vuedraggable: window.vuedraggable,//当前页面注册组件
            },
            data() {
                return {
                    drag: false,
                    myArray: [
                        { people: 'cn', id: 1, name: 'www.itxst.com' },
                        { people: 'cn', id: 2, name: 'www.baidu.com' },
                        { people: 'cn', id: 3, name: 'www.taobao.com' },
                        { people: 'us', id: 4, name: 'www.google.com' }
                    ]
                };
            },
            methods: {
                onStart() {
                    this.drag = true;
                },
                onEnd() {
                    this.drag = false;
                }
            }
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
 
               
                </div>
                <div class="content-r">   <a href="/vue-draggable/tutorial.html" target="_self">
                     <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable中文文档" />
                    </a>                     
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
            <a data-level="1" class="leve-1   doc-1    doc-2 " href="/vue-draggable/tutorial.html" title="vue.draggable中文文档">快速入门</a>
            <a data-level="1" class="leve-1   doc-1   " href="/sortablejs/neuinffi.html" title="js 版本">js 版本</a>
            <a data-level="1" class="leve-1   doc-1   " href="/vue-draggable-next/tutorial.html" title="vue3 版本">vue3 版本</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">常用例子</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/yvq3mifz.html" title="vue.draggable一款基于vue的拖拽插件">vue.draggable 单列拖拽</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/fiamvqam.html" title="vue.draggable对table表格进行拖动进行排序">vue.draggable 表格拖动</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/fueijmfy.html" title="vue.draggable两列或多列之间相互拖动">vue.draggable 多列拖动</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">属性列表</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/re7vfyfe.html" title="vue.draggable group 拖拽分组多组之间相互拖拽">group 拖拽分组</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/mi26jujm.html" title="vue.draggable delay 鼠标按下后等待n秒才允许拖动">delay 响应时间</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/j6vzfv6r.html" title="vue.draggable disabled 开启和禁用拖动">disabled 启用禁用</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/2ije3a7n.html" title="vue.draggable scroll属性容器有滚动条时是否允许拖动到隐藏区域">scroll 是否允许滚动</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/2ynnruzu.html" title="vue.draggable animation 过渡效果">animation 过渡效果</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/n6rzmqj3.html" title="vue.draggable handle 鼠标在指定元素上才允许拖动">handle 可拖动元素</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/qb2yyeu6.html" title="vue.draggable filter 排除步允许拖动的元素">filter 排除元素</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/imj6nvze.html" title="vue.draggable chosenClass 选中元素的样式">chosenClass 选中样式</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/jarqubuf.html" title="vue.draggable ghostClass 目标位置占位符的样式">ghostClass 位符样式</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/jirneq6b.html" title="vue.draggable的clone拷贝实现常用菜单功能">clone 拷贝拖拽</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">事件列表</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/vnqb7fey.html" title="vue.draggable 全部事件列表">全部事件列表</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/ufjv2i7j.html" title="vue.draggable move 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠">move 自定义控制</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/zaaeyv73.html" title="vue.draggable add 从A组拖动到B组完成的事件">add 拖拽完成事件</a>
            <a data-level="2" class="leve-2   doc-1   " href="/vue-draggable/zyrqie7f.html" title="vue.draggable start开始拖动时的事件">start 开始拖动</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
